<template lang="pug">
  section
    Card.monitor-header
      Form(:label-width="90",inline)
        FormItem(label='开始时间：')
          DatePicker(placeholder='开始时间',format="yyyy年MM月dd日",v-model='startTime',@on-open-change="handleSetDateReadonly")   
        FormItem(label='结束时间：')
          DatePicker(placeholder='结束时间',format="yyyy年MM月dd日",v-model='endTime',@on-open-change="handleSetDateReadonly")   
        FormItem(label='IP：',style='margin-left:-40px')
          Input(placeholder='IP',v-model='ip')
        Button(type='primary',@click='handleSearch') 查询
    Card.monitor-body
      Tabs(:animated='false',@on-click='handleChangeTabPane')
        TabPane(v-for="(item, index) in paneData",:label='item.label',:name='item.label',:key="index")
      show-table(ref='tab',:total='total',:columns='columns',:current='current',:data='tabData',@handleChangePage='handleChangePage')
    Modal(v-model='detailStatus').monitor-modal
      vue-json-pretty(:data='modalData',:deep='1',showLength)
</template>

<script>
import asyncMonitor from './api'
import VueJsonPretty from 'vue-json-pretty'
import showTable from '@/components/show-table/show-table'
import { unusual, performance, log, dqualityData } from './data/monitor'

export default {
  name: 'Monitor',
  components: { showTable, VueJsonPretty },
  data() {
    return {
      startTime: '',
      endTime: '',
      ip: '',
      paneData: [],
      panePath: '',
      total: 0,
      current: 1,
      tabData: [],
      columns: [],
      detailStatus: false,
      modalData: {},
      dynamiColumns: [
        {
          title: '操作',
          width: 70,
          align: 'center',
          render: (h, params) => {
            return h(
              'span',
              {
                style: { color: '#2d8cf0', cursor: 'pointer' },
                on: {
                  click: () => {
                    this.detailStatus = true
                    this.modalData = {}
                    if (this.panePath === 'logList') {
                      ;({
                        collectionLogTime: this.modalData.时间,
                        collectionUrl: this.modalData.请求url,
                        collectorIp: this.modalData.IP,
                        fatherUrl: this.modalData.父Url,
                        logInformation: this.modalData.日志信息,
                        logRank: this.modalData.日志等级,
                        typeId: this.modalData.日志类型,
                        reptilianId: this.modalData.爬虫编号,
                        siteName: this.modalData.网站名称,
                        taskName: this.modalData.任务名称
                      } = params.row)
                    }
                    if (this.panePath === 'exceptionList') {
                      ;({
                        collectionLogTime: this.modalData.异常发生时间,
                        typeId: this.modalData.异常类型,
                        logInformation: this.modalData.异常描述,
                        collectorIp: this.modalData.服务器IP,
                        fatherUrl: this.modalData.父URL,
                        collectionUrl: this.modalData.链接地址,
                        siteName: this.modalData.站点名称,
                        taskName: this.modalData.任务名称,
                        logRank: this.modalData.日志等级
                      } = params.row)
                    }
                    if (this.panePath === 'dataQualityList') {
                      ;({
                        cleanTime: this.modalData.清洗时间,
                        crawlTime: this.modalData.采集时间,
                        ip: this.modalData.采集器IP,
                        taskName: this.modalData.任务名称,
                        moduleName: this.modalData.模型名称,
                        url: this.modalData.采集url,
                        msg: this.modalData.描述信息,
                        data: this.modalData.详情
                      } = params.row)
                    }
                  }
                }
              },
              '详情'
            )
          }
        }
      ]
    }
  },
  mounted() {
    Object.keys(this.$route.meta).forEach(item => {
      let tabItem = {}
      switch (item) {
        case '异常监控':
          if (this.$route.meta['异常监控']['/monitor/exception/detail']) tabItem = { label: item, path: 'exceptionList', columns: [...unusual, ...this.dynamiColumns] }
          else tabItem = { label: item, path: 'exceptionList', columns: unusual }
          break
        case '性能监控':
          if (this.$route.meta['性能监控']['/monitor/serverPerformance/detail']) tabItem = { label: item, path: 'serverPerformanceList', columns: performance }
          else tabItem = { label: item, path: 'serverPerformanceList', columns: performance }
          break
        case '数据质量监控':
          if (this.$route.meta['数据质量监控']['/monitor/dataQuality/detail']) tabItem = { label: item, path: 'dataQualityList', columns: [...dqualityData, ...this.dynamiColumns] }
          else tabItem = { label: item, path: 'dataQualityList', columns: dqualityData }
          break
        case '日志监控':
          if (this.$route.meta['日志监控']['/monitor/log/detail']) tabItem = { label: item, path: 'logList', columns: [...log, ...this.dynamiColumns] }
          else tabItem = { label: item, path: 'logList', columns: log }
          break
      }
      this.paneData.push(tabItem)
    })
    this.columns = this.paneData[0].columns
    this.handleMonitorTableData((this.panePath = this.paneData[0].path))
  },
  methods: {
    handleChangeTabPane(name) {
      const acrivePane = this.paneData.filter(item => {
        return item.label === name
      })[0]
      this.columns = acrivePane.columns
      this.handleUpdateTableData((this.panePath = acrivePane.path))
    },
    handleChangePage(pageSub) {
      this.handleUpdateTableData(this.panePath, pageSub)
    },
    handleUpdateTableData(path, current = 1) {
      this.current = current
      this.handleMonitorTableData(path)
    },
    handleSearch() {
      if (this.startTime > this.endTime) {
        this.$Message.warning('结束时间不得小于开始时间')
        return
      }
      this.handleUpdateTableData(this.panePath)
    },
    handleMonitorTableData: async function(path) {
      try {
        this.total = 0
        this.tabData = []
        this.$refs.tab.loading = true
        const res = await asyncMonitor[path]({
          data: {
            startTime: this.startTime === '' ? '' : +this.$dayjs(this.startTime),
            endTime: this.endTime === '' ? '' : +this.$dayjs(this.endTime),
            collectorIp: this.ip,
            pageNo: this.current,
            pageSize: this.$refs.tab.pageSize
          }
        })
        this.tabData = res.data.data
        this.total = res.data.totalNumber
        this.$refs.tab.loading = false
      } catch (error) {
        this.$refs.tab.loading = false
      }
    },
    handleSetDateReadonly() {
      document.querySelectorAll('.monitor-header .ivu-input')[0].setAttribute('readonly', true)
      document.querySelectorAll('.monitor-header .ivu-input')[1].setAttribute('readonly', true)
    }
  }
}
</script>

<style lang="scss">
@import './index.scss';
</style>

